// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

/**
 * @Description:
 * @author TangYong
 * @date 2023/2/6
 */
export class TabItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    //生命周期：组件挂载后
    componentDidMount() {
    }

    //方法
    // setChoseVal = (val) => {
    //     this.setState({choseVal: val});
    // };

    //DOM
    render() {
        return (
            <View>
                <View style={style.tab}>
                    <View style={style.tab_r}>
                        <TouchableOpacity onPress={() => {
                            this.props.setVal(true);
                        }}>
                            <Text
                                style={[style.text, {fontWeight: this.props.choseVal == true ? 'bold' : 'normal'}, {color: this.props.choseVal == true ? '#000' : '#9FA5AB'}]}>{this.props.ItemOne}</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={style.tab_l}>
                        <TouchableOpacity onPress={() => {
                            this.props.setVal(false);
                        }}>
                            <Text
                                style={[style.text, {fontWeight: this.props.choseVal == false ? 'bold' : 'normal'}, {color: this.props.choseVal == true ? '#9FA5AB' : '#000'}]}>{this.props.ItemTwo}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={style.line}>
                    <View
                        style={[style.line_l, {borderBottomColor: this.props.choseVal == true ? '#409EFF' : '#fff'}]}>
                    </View>
                    <View
                        style={[style.line_l, {borderBottomColor: this.props.choseVal == false ? '#409EFF' : '#fff'}]}>
                    </View>
                </View>
            </View>


        );
    }

}

const style = StyleSheet.create({
    //样式
    //样式
    tab: {
        marginTop: -2,
        backgroundColor: '#FFF',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    tab_r: {
        flexDirection: 'row',
        width: '50%',
        justifyContent: 'center',

    },
    tab_l: {
        flexDirection: 'row',
        width: '50%',
        justifyContent: 'center',
    },
    text: {
        fontSize: 14,
        padding: 10,
    },
    line: {
        width: '100%',
        backgroundColor: '#FFF',
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    line_l: {
        // 【方法一】用border做分割线
        borderBottomColor: '#409EFF',
        borderBottomWidth: 3,
        width: 30,
        flexDirection: 'row',
        justifyContent: 'center',
    },
});

